<div class="assetItem">
    <img class="assetItemImg" :src="makeSrc" ref="origin" />
    <div class="opIconGroup">
        <Icon class="opIcon" type="md-resize" @click="resize" :title="$t('压缩')" />
    </div>
    <Modal v-if="showResizeWindow" v-model="showResizeWindow" :title="$t('压缩')" fullscreen @on-ok="save">
        <div>
            {{$t('宽')}}
            <InputNumber v-model="resizeWidth" controls-outside :step="100" :min="10"
                :max="$refs.origin.naturalWidth" />
            {{$t('高')}}
            <InputNumber v-model="resizeHeight" controls-outside :step="100" :min="10"
                :max="$refs.origin.naturalHeight" />
            <br />
            {{$t('质量')}}
            <Slider v-model="quality" show-input :min="0.1" :max="1" :step="0.05"></Slider>
        </div>
        <div style="display: flex;flex-direction: row;">
            <div style="display: flex;flex-direction: column;">
                {{$t('原图')}}:{{$t('文件大小')}} {{Math.round(file.content.byteLength/1024)}}KB<br />
                <img style="max-width:50vw;" :src="makeSrc" />
            </div>
            <div style="display: flex;flex-direction: column;">
                {{$t('压缩后')}}:{{$t('文件大小')}} {{resizedFileSize}}KB<br />
                <img ref="result" style="max-width:50vw;" :src="resizedSrc" />
            </div>
        </div>
    </Modal>
</div>